<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增优惠券')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-coupon-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label">优惠券名称：</label>
                <div class="col-sm-8">
                    <input name="title" class="form-control" type="text">
                    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 例如：无门槛50元优惠券 | 单品最高减2000元</span>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">图标：</label>
                <div class="col-sm-8">
                    <input name="icon" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">优惠券类型：</label>
                <div class="col-sm-8">
                    <select name="type" class="form-control m-b">
                        <option value="">请选择</option>
                        <option value="1">满减券</option>
                        <option value="2">叠加满减券</option>
                        <option value="3">无门槛券</option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">满多少金额：</label>
                <div class="col-sm-8">
                    <input name="withAmount" class="form-control" type="number" min="0" value="0">
                    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 例如：满100可用</span>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">优惠券金额：</label>
                <div class="col-sm-8">
                    <input name="amount" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">发券数量：</label>
                <div class="col-sm-8">
                    <input name="quota" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">发放时间：</label>
                <div class="col-sm-8">
                    <div class="input-daterange input-group">
                        <input type="text" class="input-sm form-control" name="startTime" id="laydate-startTime" placeholder="年-月-日" required autocomplete="off"/>
                        <span class="input-group-addon">到</span>
                        <input type="text" class="input-sm form-control" name="endTime" id="laydate-endTime" placeholder="年-月-日" required autocomplete="off"/>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">时效：</label>
                <div class="col-sm-8">
                    <select name="validType" class="form-control m-b" required>
                        <option value="">请选择</option>
                        <option value="1">绝对时效</option>
                        <option value="2">相对时效</option>
                    </select>
                    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>绝对时效:绝对时效（XXX-XXX时间段有效）；相对时效（领取后N天有效）</span>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">使用时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <div class="input-daterange input-group">
                            <input type="text" class="input-sm form-control" name="validStartTime" id="laydate-validStartTime" placeholder="年-月-日" autocomplete="off"/>
                            <span class="input-group-addon">到</span>
                            <input type="text" class="input-sm form-control" name="validEndTime" id="laydate-validEndTime" placeholder="年-月-日" autocomplete="off"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">自领取之日起有效天数：</label>
                <div class="col-sm-8">
                    <input name="validDays" class="form-control" type="number" min="0">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">状态：</label>
                <div class="col-sm-8">
                    <div class="radio-box">
                        <input type="radio" id="status_1" name="status" value="1" checked="checked">
                        <label th:for="status_1" th:text="正常"></label>
                    </div>

                    <div class="radio-box">
                        <input type="radio" id="status_2" name="status" value="2">
                        <label th:for="status_2" th:text="不能使用"></label>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var prefix = ctx + "coupon/coupon"
        $("#form-coupon-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-coupon-add').serialize());
            }
        }

        $(function () {
            initLaydateDate();
        })

        function initLaydateDate() {
            layui.use('laydate', function () {
                var laydate = layui.laydate;

                var startDate = laydate.render({
                    elem: '#laydate-startTime',
                    max: $('#laydate-endTime').val(),
                    theme: 'molv',
                    trigger: 'click',
                    done: function (value, date) {
                        // 结束时间大于开始时间
                        if (value !== '') {
                            endDate.config.min.year = date.year;
                            endDate.config.min.month = date.month - 1;
                            endDate.config.min.date = date.date;
                        } else {
                            endDate.config.min.year = '';
                            endDate.config.min.month = '';
                            endDate.config.min.date = '';
                        }
                    }
                });

                var endDate = laydate.render({
                    elem: '#laydate-endTime',
                    min: $('#laydate-startTime').val(),
                    theme: 'molv',
                    trigger: 'click',
                    done: function (value, date) {
                        // 开始时间小于结束时间
                        if (value !== '') {
                            startDate.config.max.year = date.year;
                            startDate.config.max.month = date.month - 1;
                            startDate.config.max.date = date.date;
                        } else {
                            startDate.config.max.year = '';
                            startDate.config.max.month = '';
                            startDate.config.max.date = '';
                        }
                    }
                });


                var validStartTime = laydate.render({
                    elem: '#laydate-validStartTime',
                    max: $('#laydate-validEndTime').val(),
                    theme: 'molv',
                    trigger: 'click',
                    done: function (value, date) {
                        // 结束时间大于开始时间
                        if (value !== '') {
                            validEndTime.config.min.year = date.year;
                            validEndTime.config.min.month = date.month - 1;
                            validEndTime.config.min.date = date.date;
                        } else {
                            validEndTime.config.min.year = '';
                            validEndTime.config.min.month = '';
                            validEndTime.config.min.date = '';
                        }
                    }
                });

                var validEndTime = laydate.render({
                    elem: '#laydate-validEndTime',
                    min: $('#laydate-validStartTime').val(),
                    theme: 'molv',
                    trigger: 'click',
                    done: function (value, date) {
                        // 开始时间小于结束时间
                        if (value !== '') {
                            validStartTime.config.max.year = date.year;
                            validStartTime.config.max.month = date.month - 1;
                            validStartTime.config.max.date = date.date;
                        } else {
                            validStartTime.config.max.year = '';
                            validStartTime.config.max.month = '';
                            validStartTime.config.max.date = '';
                        }
                    }
                });
            });
        }

    </script>
</body>
</html>